<template>
  <template v-if="!hasChildren(item)">
    <a-menu-item :key="item.path" @click="selectMenu(item)">
      <template #icon>
        <!-- <i :class="`iconfont icon-${item.icon}`" style="font-size: 18px"></i> -->
        <Icon :name="item.icon"></Icon>
      </template>
      <span class="menu-title">{{ item.label }}</span>
    </a-menu-item>
  </template>
  <template v-else>
    <a-sub-menu :key="item.path">
      <template #icon>
        <Icon :name="item.icon"></Icon>
        <!-- <i :class="`iconfont icon-${item.icon}`" style="font-size: 18px"></i> -->
      </template>
      <template #title>
        <span class="menu-title">{{ item.label }}</span>
      </template>
      <MenuItem
        @selectMenu="selectMenu"
        v-for="items in item.children"
        :key="items.path"
        :item="items"
      ></MenuItem>
    </a-sub-menu>
  </template>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { hasChildren } from "./modules/help";
import Icon from "@/components/Icon.vue";
import MenuItem from "./Item.vue";
const props = defineProps({
  item: {
    type: Object,
    default: () => ({
      label: "展示",
      children: [],
      name: "PathName",
      path: ""
    })
  }
});

const emits = defineEmits(["selectMenu"]);

function selectMenu(item) {
  emits("selectMenu", item);
}
</script>

<style lang="less">
.arco-menu-indent {
  width: 18px;
}
.menu-title {
  font-size: var(--font-size);
  color: var(--color-1);
}
</style>
